<template>
  <div id="app">
    <!-- 如果当前路由是登录页面，只显示登录组件 -->
    <LoginCom v-if="$route.path === '/login'" />
    <!-- 如果不是登录页面，显示其他内容 -->
    <div v-else>
      <TheHeader />
      <MobileMenu />
      <router-view class="main-container" />
      <TheFooter />
      <FloatingButtons />
      <Lantern />
      <RandomVideo />
      <div class="cursor-container"></div>
    </div>
  </div>
</template>

<script>
import TheHeader from '@/layout/Header/index.vue'
import TheFooter from '@/layout/Footer/index.vue'
import FloatingButtons from '@/components/common/FloatingButtons.vue'
import { initTheme } from '@/utils/theme'
import LoginCom from '@/views/login/index.vue'
import MobileMenu from '@/layout/MobileMenu/index.vue'
import Lantern from '@/components/Lanterns/index.vue'
import RandomVideo from '@/components/RandomVideo/index.vue'
import { getCookie, removeCookie } from '@/utils/cookie'

export default {
  name: 'App',
  components: {
    TheHeader,
    TheFooter,
    FloatingButtons,
    LoginCom,
    MobileMenu,
    Lantern,
    RandomVideo
  },
  async created() {
    initTheme()
    await this.handleThirdPartyLogin()
    // await this.getUserInfo()

    let url = getCookie('redirectUrl')
    if (url) {
      removeCookie('redirectUrl')
      window.location.href = url
    }
  },
  methods: {
    async handleThirdPartyLogin() {
      this.$store.commit('SET_LOGIN_VISIBLE', false)
      let flag = window.location.href.indexOf('token') != -1
      if (flag) {
        let token = window.location.href.split('token=')[1]
        this.$store.commit('SET_TOKEN', token)
      }
    },
    initCursorEffect() {
      const container = document.querySelector('.cursor-container')

      document.addEventListener('click', (e) => {
        const cursor = document.createElement('div')
        cursor.className = 'cursor-fx'
        cursor.style.left = `${e.clientX}px`
        cursor.style.top = `${e.clientY}px`
        container.appendChild(cursor)

        cursor.addEventListener('animationend', () => {
          cursor.remove()
        })
      })
    }
  },
  mounted() {
    this.initCursorEffect()
  }
}
</script>

<style lang="scss">
@import 'animate.css';
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
* {
  margin: 0;
  padding: 0;
  font-family: "font";
  box-sizing: border-box;
}
</style>